<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>答题页面 - 智能学习平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --primary-dark: #3a0ca3;
            --secondary: #7209b7;
            --accent: #f72585;
            --success: #4cc9f0;
            --warning: #f9c74f;
            --danger: #f94144;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 头部样式 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin-bottom: 30px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 0 0 20px 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

        .logo-icon {
            color: var(--primary);
            font-size: 2rem;
        }

        .exam-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .exam-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark);
        }

        .exam-subtitle {
            font-size: 0.9rem;
            color: var(--gray);
        }

        .timer {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: var(--dark);
            background: rgba(67, 97, 238, 0.1);
            padding: 10px 15px;
            border-radius: 10px;
        }

        .timer-icon {
            color: var(--primary);
        }

        /* 答题内容 */
        .quiz-container {
            display: flex;
            gap: 30px;
            margin: 30px 0 60px;
        }

        /* 题目导航 */
        .question-nav {
            flex: 0 0 250px;
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            height: fit-content;
        }

        .nav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        .question-number {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #f8f9fa;
            color: var(--dark);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }

        .question-number.current {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        .question-number.answered {
            background: rgba(76, 201, 240, 0.2);
            color: var(--success);
        }

        .question-number.marked {
            position: relative;
        }

        .question-number.marked::after {
            content: '';
            position: absolute;
            top: -3px;
            right: -3px;
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
        }

        .question-controls {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .control-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            background: #f8f9fa;
            border: none;
            border-radius: 10px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }

        .control-btn:hover {
            background: var(--primary-light);
            color: white;
        }

        /* 题目区域 */
        .question-area {
            flex: 1;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 25px;
        }

        .question-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark);
        }

        .question-meta {
            display: flex;
            gap: 15px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            color: var(--gray);
        }

        .question-content {
            margin-bottom: 30px;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            font-family: 'Fira Code', monospace;
            overflow-x: auto;
        }

        /* 选项区域 */
        .options-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px;
        }

        .option-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 18px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition);
        }

        .option-item:hover {
            border-color: var(--primary-light);
            background: rgba(67, 97, 238, 0.05);
        }

        .option-item.selected {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.1);
        }

        .option-marker {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #f8f9fa;
            font-weight: 600;
            flex-shrink: 0;
        }

        .option-item.selected .option-marker {
            background: var(--primary);
            color: white;
        }

        .option-text {
            flex: 1;
        }

        /* 题目操作 */
        .question-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 14px rgba(67, 97, 238, 0.4);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
        }

        .mark-btn {
            background: transparent;
            border: 2px solid var(--accent);
            color: var(--accent);
        }

        .mark-btn:hover {
            background: var(--accent);
            color: white;
        }

        .mark-btn.marked {
            background: var(--accent);
            color: white;
        }

        /* 答案解析 */
        .answer-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            margin-top: 30px;
            display: none;
        }

        .answer-section.show {
            display: block;
        }

        .answer-header {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .answer-content {
            line-height: 1.6;
        }

        .correct-answer {
            color: var(--success);
            font-weight: 600;
        }

        /* 答题进度 */
        .progress-container {
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--card-shadow);
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .progress-text {
            font-weight: 500;
            color: var(--dark);
        }

        .progress-bar {
            height: 10px;
            background: #e9ecef;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 5px;
            width: 0;
            transition: width 0.5s ease-in-out;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .quiz-container {
                flex-direction: column;
            }

            .question-nav {
                flex: 1;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 20px;
                padding: 15px;
            }

            .exam-info {
                order: 3;
                width: 100%;
                margin-top: 15px;
            }

            .question-header {
                flex-direction: column;
                gap: 15px;
            }

            .question-meta {
                width: 100%;
                justify-content: space-between;
            }

            .question-actions {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }

            .action-btn {
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            .question-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .question-number {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }

            .question-title {
                font-size: 1.1rem;
            }

            .option-item {
                padding: 14px 16px;
            }

            .option-marker {
                width: 24px;
                height: 24px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <a href="index_2.html" class="logo">
                <i class="fas fa-brain logo-icon"></i>
                <span>智学平台</span>
            </a>

            <div class="exam-info">
                <div class="exam-title">C语言程序设计认证考试</div>
                <div class="exam-subtitle">嵌入式开发方向 - 模拟测试</div>
            </div>

            <div class="timer">
                <i class="fas fa-clock timer-icon"></i>
                <span id="time-display">01:25:36</span>
            </div>
        </div>

        <!-- 答题进度 -->
        <div class="progress-container">
            <div class="progress-header">
                <div class="progress-text">答题进度: <span id="progress-text">1/50</span></div>
                <div class="progress-text">已答: <span id="answered-text">0</span>题</div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: 2%"></div>
            </div>
        </div>

        <!-- 答题内容 -->
        <div class="quiz-container">
            <!-- 题目导航 -->
            <div class="question-nav">
                <div class="nav-header">
                    <div class="nav-title">题目导航</div>
                    <div class="nav-subtitle">共50题</div>
                </div>

                <div class="question-grid" id="question-grid">
                    <!-- 题目导航将通过JS动态生成 -->
                </div>

                <div class="question-controls">
                    <button class="control-btn" id="marked-questions-btn">
                        <i class="fas fa-flag"></i>
                        <span>标记的题目 (<span id="marked-count">0</span>)</span>
                    </button>
                    <button class="control-btn" id="all-questions-btn">
                        <i class="fas fa-list"></i>
                        <span>题目列表</span>
                    </button>
                    <button class="control-btn" id="unanswered-questions-btn">
                        <i class="fas fa-times-circle"></i>
                        <span>未答题目 (<span id="unanswered-count">50</span>)</span>
                    </button>
                </div>
            </div>

            <!-- 题目区域 -->
            <div class="question-area">
                <div class="question-header">
                    <h2 class="question-title" id="question-title">题目 #1</h2>
                    <div class="question-meta">
                        <span class="meta-item"><i class="fas fa-star"></i> 难度: <span
                                id="question-difficulty">中等</span></span>
                        <span class="meta-item"><i class="fas fa-clock"></i> 建议时间: <span
                                id="question-time">2分钟</span></span>
                    </div>
                </div>

                <div class="question-content" id="question-content">
                    <!-- 题目内容将通过JS动态生成 -->
                </div>

                <div class="options-list" id="options-list">
                    <!-- 选项将通过JS动态生成 -->
                </div>

                <div class="answer-section" id="answer-section">
                    <div class="answer-header">
                        <i class="fas fa-lightbulb"></i>
                        <span>答案与解析</span>
                    </div>
                    <div class="answer-content" id="answer-content">
                        <!-- 答案内容将通过JS动态生成 -->
                    </div>
                </div>

                <div class="question-actions">
                    <div>
                        <button class="action-btn mark-btn" id="mark-btn">
                            <i class="far fa-flag"></i>
                            <span>标记题目</span>
                        </button>
                    </div>
                    <div style="display: flex; gap: 10px;">
                        <button class="action-btn btn-outline" id="show-answer-btn">
                            <i class="fas fa-eye"></i>
                            <span>查看答案</span>
                        </button>
                        <button class="action-btn btn-outline" id="prev-btn">
                            <i class="fas fa-chevron-left"></i>
                            <span>上一题</span>
                        </button>
                        <button class="action-btn btn-primary" id="next-btn">
                            <span>下一题</span>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 题目数据
        const questions = [
            {
                id: 1,
                title: "C语言指针基础",
                content: `
                    <p>以下关于C语言指针的描述中，正确的是：</p>
                    
                    <div class="code-block">
                        #include &lt;stdio.h&gt;
                        
                        int main() {
                            int arr[5] = {1, 2, 3, 4, 5};
                            int *ptr = arr;
                            printf("%d", *(ptr + 2));
                            return 0;
                        }
                    </div>
                    
                    <p>上述代码的输出结果是什么？</p>
                `,
                options: [
                    { id: 'A', text: '1' },
                    { id: 'B', text: '2' },
                    { id: 'C', text: '3' },
                    { id: 'D', text: '4' }
                ],
                answer: 'C',
                explanation: `
                    <p>正确答案: <span class="correct-answer">C. 3</span></p>
                    <p><strong>解析：</strong>在C语言中，数组名代表数组首元素的地址。因此<code>int *ptr = arr</code>将ptr指向数组arr的第一个元素。<code>ptr + 2</code>表示指向数组的第三个元素（索引为2），<code>*(ptr + 2)</code>解引用获取该位置的值，即3。</p>
                    <p>指针算术运算中，指针加n表示向前移动n个元素的位置，而不是n个字节。因为ptr是int指针，每个int占4字节，所以<code>ptr + 2</code>实际地址增加了8字节。</p>
                `,
                difficulty: '中等',
                time: '2分钟'
            },
            {
                id: 2,
                title: "结构体与内存对齐",
                content: `
                    <p>有以下结构体定义：</p>
                    
                    <div class="code-block">
                        typedef struct {
                            char a;
                            int b;
                            short c;
                            double d;
                        } Example;
                    </div>
                    
                    <p>在64位系统上，使用默认编译选项，sizeof(Example)的值是多少？</p>
                `,
                options: [
                    { id: 'A', text: '15' },
                    { id: 'B', text: '16' },
                    { id: 'C', text: '24' },
                    { id: 'D', text: '32' }
                ],
                answer: 'C',
                explanation: `
                    <p>正确答案: <span class="correct-answer">C. 24</span></p>
                    <p><strong>解析：</strong>结构体内存对齐规则：</p>
                    <ol>
                        <li>char a (1字节) - 偏移0</li>
                        <li>int b (4字节) - 需要对齐到4的倍数，偏移4</li>
                        <li>short c (2字节) - 偏移8</li>
                        <li>double d (8字节) - 需要对齐到8的倍数，偏移16</li>
                    </ol>
                    <p>总大小需要是最大成员(double, 8字节)的倍数，所以是24字节。</p>
                `,
                difficulty: '困难',
                time: '3分钟'
            },
            {
                id: 3,
                title: "宏定义与运算符优先级",
                content: `
                    <p>有以下宏定义：</p>
                    
                    <div class="code-block">
                        #define SQUARE(x) x * x
                    </div>
                    
                    <p>当调用<code>SQUARE(2 + 3)</code>时，结果是多少？</p>
                `,
                options: [
                    { id: 'A', text: '25' },
                    { id: 'B', text: '11' },
                    { id: 'C', text: '13' },
                    { id: 'D', text: '编译错误' }
                ],
                answer: 'B',
                explanation: `
                    <p>正确答案: <span class="correct-answer">B. 11</span></p>
                    <p><strong>解析：</strong>宏是简单的文本替换，<code>SQUARE(2 + 3)</code>会被替换为<code>2 + 3 * 2 + 3</code>。</p>
                    <p>由于乘法优先级高于加法，实际计算为<code>2 + (3 * 2) + 3 = 2 + 6 + 3 = 11</code>。</p>
                    <p>正确的宏定义应该是<code>#define SQUARE(x) ((x) * (x))</code>，使用括号避免运算符优先级问题。</p>
                `,
                difficulty: '中等',
                time: '2分钟'
            },
            // 更多题目...
        ];

        // 初始化状态
        let currentQuestionIndex = 0;
        let userAnswers = Array(questions.length).fill(null);
        let markedQuestions = Array(questions.length).fill(false);

        // DOM元素
        const questionGrid = document.getElementById('question-grid');
        const questionTitle = document.getElementById('question-title');
        const questionContent = document.getElementById('question-content');
        const optionsList = document.getElementById('options-list');
        const answerSection = document.getElementById('answer-section');
        const answerContent = document.getElementById('answer-content');
        const showAnswerBtn = document.getElementById('show-answer-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const markBtn = document.getElementById('mark-btn');
        const progressText = document.getElementById('progress-text');
        const answeredText = document.getElementById('answered-text');
        const progressFill = document.querySelector('.progress-fill');
        const markedCount = document.getElementById('marked-count');
        const unansweredCount = document.getElementById('unanswered-count');
        const questionDifficulty = document.getElementById('question-difficulty');
        const questionTime = document.getElementById('question-time');

        // 初始化题目导航
        function initQuestionGrid() {
            questionGrid.innerHTML = '';
            questions.forEach((_, index) => {
                const numberBtn = document.createElement('div');
                numberBtn.className = 'question-number';
                numberBtn.textContent = index + 1;
                numberBtn.addEventListener('click', () => navigateToQuestion(index));
                questionGrid.appendChild(numberBtn);
            });
        }

        // 更新题目显示
        function updateQuestionDisplay() {
            const question = questions[currentQuestionIndex];

            // 更新题目内容
            questionTitle.textContent = `题目 #${question.id}`;
            questionContent.innerHTML = question.content;
            questionDifficulty.textContent = question.difficulty;
            questionTime.textContent = question.time;

            // 更新选项
            optionsList.innerHTML = '';
            question.options.forEach(option => {
                const optionItem = document.createElement('div');
                optionItem.className = 'option-item';
                if (userAnswers[currentQuestionIndex] === option.id) {
                    optionItem.classList.add('selected');
                }

                const optionMarker = document.createElement('div');
                optionMarker.className = 'option-marker';
                optionMarker.textContent = option.id;

                const optionText = document.createElement('div');
                optionText.className = 'option-text';
                optionText.textContent = option.text;

                optionItem.appendChild(optionMarker);
                optionItem.appendChild(optionText);

                optionItem.addEventListener('click', () => selectOption(option.id));
                optionsList.appendChild(optionItem);
            });

            // 更新答案区域
            answerContent.innerHTML = question.explanation;
            answerSection.classList.remove('show');
            showAnswerBtn.innerHTML = '<i class="fas fa-eye"></i> <span>查看答案</span>';

            // 更新标记状态
            updateMarkButton();

            // 更新导航高亮
            updateNavigationHighlight();

            // 更新进度
            updateProgress();

            // 更新按钮状态
            updateButtonStates();
        }

        // 选择选项
        function selectOption(optionId) {
            userAnswers[currentQuestionIndex] = optionId;

            // 更新选项显示
            document.querySelectorAll('.option-item').forEach(item => {
                item.classList.remove('selected');
            });

            document.querySelectorAll('.option-item').forEach(item => {
                if (item.querySelector('.option-marker').textContent === optionId) {
                    item.classList.add('selected');
                }
            });

            // 更新进度
            updateProgress();
        }

        // 更新标记按钮
        function updateMarkButton() {
            if (markedQuestions[currentQuestionIndex]) {
                markBtn.classList.add('marked');
                markBtn.innerHTML = '<i class="fas fa-flag"></i> <span>已标记</span>';
            } else {
                markBtn.classList.remove('marked');
                markBtn.innerHTML = '<i class="far fa-flag"></i> <span>标记题目</span>';
            }

            // 更新标记计数
            const markedCountValue = markedQuestions.filter(marked => marked).length;
            markedCount.textContent = markedCountValue;
        }

        // 更新导航高亮
        function updateNavigationHighlight() {
            document.querySelectorAll('.question-number').forEach((number, index) => {
                number.classList.remove('current', 'answered');

                if (index === currentQuestionIndex) {
                    number.classList.add('current');
                }

                if (userAnswers[index] !== null) {
                    number.classList.add('answered');
                }

                if (markedQuestions[index]) {
                    number.classList.add('marked');
                } else {
                    number.classList.remove('marked');
                }
            });
        }

        // 更新进度
        function updateProgress() {
            const answeredCount = userAnswers.filter(answer => answer !== null).length;
            const totalQuestions = questions.length;
            const progressPercent = (answeredCount / totalQuestions) * 100;

            progressText.textContent = `${currentQuestionIndex + 1}/${totalQuestions}`;
            answeredText.textContent = answeredCount;
            unansweredCount.textContent = totalQuestions - answeredCount;
            progressFill.style.width = `${progressPercent}%`;
        }

        // 更新按钮状态
        function updateButtonStates() {
            prevBtn.disabled = currentQuestionIndex === 0;
            nextBtn.disabled = currentQuestionIndex === questions.length - 1;

            if (prevBtn.disabled) {
                prevBtn.style.opacity = '0.5';
                prevBtn.style.cursor = 'not-allowed';
            } else {
                prevBtn.style.opacity = '1';
                prevBtn.style.cursor = 'pointer';
            }

            if (nextBtn.disabled) {
                nextBtn.style.opacity = '0.5';
                nextBtn.style.cursor = 'not-allowed';
            } else {
                nextBtn.style.opacity = '1';
                nextBtn.style.cursor = 'pointer';
            }
        }

        // 导航到指定题目
        function navigateToQuestion(index) {
            currentQuestionIndex = index;
            updateQuestionDisplay();
        }

        // 切换到上一题
        function goToPreviousQuestion() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                updateQuestionDisplay();
            }
        }

        // 切换到下一题
        function goToNextQuestion() {
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                updateQuestionDisplay();
            }
        }

        // 标记/取消标记当前题目
        function toggleMarkQuestion() {
            markedQuestions[currentQuestionIndex] = !markedQuestions[currentQuestionIndex];
            updateMarkButton();
            updateNavigationHighlight();
        }

        // 显示/隐藏答案
        function toggleAnswerVisibility() {
            answerSection.classList.toggle('show');

            if (answerSection.classList.contains('show')) {
                showAnswerBtn.innerHTML = '<i class="fas fa-eye-slash"></i> <span>隐藏答案</span>';
            } else {
                showAnswerBtn.innerHTML = '<i class="fas fa-eye"></i> <span>查看答案</span>';
            }
        }

        // 初始化
        function init() {
            initQuestionGrid();
            updateQuestionDisplay();

            // 添加事件监听器
            prevBtn.addEventListener('click', goToPreviousQuestion);
            nextBtn.addEventListener('click', goToNextQuestion);
            markBtn.addEventListener('click', toggleMarkQuestion);
            showAnswerBtn.addEventListener('click', toggleAnswerVisibility);

            // 初始化倒计时
            const timerInterval = setInterval(updateTimer, 1000);
        }

        // 倒计时功能
        function updateTimer() {
            const timeDisplay = document.getElementById('time-display');
            let time = timeDisplay.textContent.split(':');
            let hours = parseInt(time[0]);
            let minutes = parseInt(time[1]);
            let seconds = parseInt(time[2]);

            seconds--;

            if (seconds < 0) {
                seconds = 59;
                minutes--;

                if (minutes < 0) {
                    minutes = 59;
                    hours--;

                    if (hours < 0) {
                        // 时间到，自动提交
                        alert('时间到！考试已结束。');
                        clearInterval(timerInterval);
                        return;
                    }
                }
            }

            timeDisplay.textContent =
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

        // 启动应用
        init();
    </script>
</body>

</html>